
.indexNav{
    position:relative;
    width:100%;
    font-weight: bold;
}
.indexNav-D1List{
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    height: auto;
    width: 100%;
    list-style: none;
}
.indexNav-D1Item{
    position: relative;
    top: 0;
    margin: 0;
    left: 0;
    width: 100%;
    height: 42px;
    list-style: none;
    border-bottom: var(--colorD) 1px solid;
}
.indexNav-D1Content{
    position: relative;
    width: 100%;
    height: 100%;
    /* text-align: center; */
}
.indexNav-D1Content::before{
    content: "";
    width: 0;
    height: 100%;
    background-color: var(--colorD);
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    transition:width 0.1s linear;
    transition-delay: 0.1s;
}
.indexNav-D1Link{
    color: var(--colorDT);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition:color 0.1s linear;
}
.indexNav-D1Link::before{
    content: "";
    width: 2em;
    height: 80%;
    display:inline-block;
    vertical-align: text-bottom;
}
.indexNav-iconBox{
    position:absolute;
    height:100%;
    left:0;
    top:0;
}
.indexNav-icon{
    width:100%;
    height:100%;
    background-color:var(--colorDT);
}
.indexNav-D1Item:hover .indexNav-icon{
    background-color:var(--colorCT);
}
.indexNav-D1Item:hover .indexNav-D1Content::before{
    width: 100%;
    transition-delay: 0s;
}
.indexNav-D1Item:hover .indexNav-D1Link{
    transition-delay: 0s;
    color: var(--colorCT);
}

.indexNav-D2ListBox{
    position: absolute;
    left: 100%;
    width: 0;
    height: auto;
    top: 0;
    background-color: var(--colorD);
    overflow: hidden;
    transition: padding,width 0.1s linear;
    transition-delay: 0.1s;
}
.indexNav-D1Item:hover .indexNav-D2ListBox{
    width: 80%;
    padding-left:5%;
    transition-delay: 0.1s;
}
.indexNav-D2List{
    position: relative;
    left: 0;
    width: 100%;
    top: 0;
    padding: 0;
}
.indexNav-D2Item{
    position: relative;
    word-wrap: none;
    width: 100%;
    height: 32px;
    border-bottom: var(--colorD1) 1px solid;
    background-color: var(--colorA);
}
.indexNav-D2Item:last-child{
    border-bottom: none;
}
.indexNav-D2Content{
    position: relative;
    width: 100%;
    height: 100%;
}

.indexNav-D2Item::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: var(--colorD);
    transition: width 0.1s linear;
}
.indexNav-D2Item:hover::before{
    width: 100%;
}
.indexNav-D2Link{
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    color: var(--colorDT);
    transition: color 0.1s linear;
}
.indexNav-D2Item:hover .indexNav-D2Link{
    color: var(--colorCT);
}
.indexNav-D2Link::before{
    content: "";
    display: inline-block;
    position: relative;
    height: 90%;
    width: 1.5em;   
    vertical-align: text-bottom;
}

.audioControl{
    position: absolute;
    bottom: 36px;
    left: 0;
    height: 200px;
    width: 100%;
    background-color: var(--colorA);
    box-sizing: border-box;
    border: var(--colorD) 2px solid;
}
.audioControl-CtrlBox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.audioControl-visual{
    position: absolute;
    top: 0;
    height: 80%;
    width: 100%;
}
.audioControl-playBar{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    left: 0;
    border-left: 6px var(--colorA) solid;
    border-right: 6px var(--colorA) solid;
    background-color: var(--colorD1);
    z-index:11;
}
.audioControl-playBarBtn{
    position: absolute;
    top: 50%;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: var(--colorB);
    border: none;
    transform: translate(-50%,-50%);
}
.audioControl-playBarLow{
    position: absolute;
    height: 100%;
    background-color: var(--colorCT);
}
.audioControl-playBarCtrl{
    position: absolute;
    height: 12px;
    width:106.53%;
    left:-6px;
    top:50%;
    transform: translateY(-50%);
}
.audioControl-buttons{
    position: absolute;
    bottom: 0;
    height: 18%;
    width: 100%;
}
.audioControl-button{
    position: absolute;
    width: 32px;
    height: 32px;
    background-color:var(--colorD);
    left: 50%;
    font-size: 0;
    color:#0000;
    top: 50%;
    transition: filter 0.2s linear;
}
.audioControl-button:hover{
    background-color:var(--colorCT);
}

.audioControl-playType{
    transform: translate(-290%,-50%);
    z-index:1;
}
.audioControl-playType+.audioControl-playType{
    z-index:0;
    display:none;
    transform:translate(-290%,-50%) scale(0.6);
}
.audioControl-playType.order+.audioControl-playType{
    display:block;
}
.audioControl-playType.reverse+.audioControl-playType{
    display:block;
    transform:translate(-290%,-50%) scaleY(-1) scale(0.6);
}
.audioControl-playType:hover+.audioControl-playType{
    background-color:var(--colorCT);
}
.audioControl-last{
    transform: translate(-170%,-50%) scaleX(-1);
}
.audioControl-playPause{
    transform: translate(-50%,-50%);
}
.audioControl-next{
    transform: translate(70%,-50%);
}
.audioControl-callList{
    transform: translate(190%,-50%);
}
.audioControl-mediaListBox{
    left:100%;
    position: absolute;
    bottom:0;
    height:400px;
    width:100%;
    margin-left:2px;
    background:var(--colorA);
}
.audioControl-mediaList{
    height:100%;
    width:100%;
    overflow-y:scroll;
}
.audioControl-mediaItem{
    position:relative;
    height:24px;
    width:100%;
}
.audioControl-mediaItem.playing{
    background-color:var(--colorDT);
}
.audioControl-mediaItemIndex{
    font-weight: bold;
    color:var(--colorBT);
}
.playing .audioControl-mediaItemIndex{
    color:var(--colorCT);
}
.audioControl-mediaItemLink{
    height:100%;
    position: absolute;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    color:var(--colorBT);
}
.audioControl-mediaItemLink:hover{
    color:var(--colorCT);
}
.playing .audioControl-mediaItemLink{
    color:var(--colorAT);
}
.audioControl-mediaItemButton{
    position:absolute;
    display:block;
    top:0;
    right:0;
    border:none;
    height:24px;
    width:24px;
    background-color:var(--colorBT);
}
.audioControl-mediaItemButton:hover{
    background-color:var(--colorCT);
}

.audioControl-image{
    position:absolute;
    display:block;
    width:170px;
    height:143px;
    object-fit: contain;
    box-sizing:border-box;
    border-right:var(--colorDT) 1px solid;
    border-bottom:var(--colorDT) 1px solid;
}

.audioControl-volumeBar{
    position: absolute;
    top: 0%;
    right: 0;
    width: 6%;
    height: 76%;
    background-color: var(--colorD1);
}
.audioControl-volumeBar::before,.audioControl-volumeBar::after {
    content: "";
    z-index:1;
    display: block;
    position: absolute;
    top: 100%;
    width: 24px;
    right: 0;
    height: 24px;
}
.audioControl-volumeBar::before{
    background-color: var(--colorD3);
}
.audioControl-volumeBar::after {
    background-color: var(--colorF);
    mask-image:url("../img/iconSprites.svg");
    mask-size:1000% 1000%;
    -webkit-mask-image:url("../img/iconSprites.svg");
    -webkit-mask-size:1000% 1000%;
    mask-position: -500% -200%;
	-webkit-mask-position: -500% -200%;
}
.ismuted .audioControl-volumeBar::after {
    clip-path: polygon(0% 0%,0% 100% , 58% 100%, 58% 0%);
}
.audioControl-volumeBarPower{
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    background-color:var(--colorCT);
}
.audioControl-volumeBarBtn{
    position:absolute;
    background-color:var(--colorBT);
    right:0;
    width:24px;
    height:12px;
    clip-path: polygon(100% 0%, 100% 100%, 30% 100%, 0% 50%, 30% 0%);
}
.audioControl-volumeBarCtrl{
    position:absolute;
    top:0px;
    width:24px;
    height:120%;
    right:0;
}
.audioControl-ctrlTimeBox{
    display:none;
    position:absolute;
    bottom:6%;
    background-color:var(--colorA);
    font-size:0;
    border:1px var(--colorB) solid;  
    min-width: auto;
    white-space: nowrap;
    z-index:10;
}
.audioControl-playBar:hover+.audioControl-ctrlTimeBox{
    display:block;
}
.audioControl-ctrlTimeBox::before{
    content:"";
    display:block;
    position:absolute;
    bottom:-5px;
    left:-1px;
    width:7px;
    height:7px;
    background-color:var(--colorA);
    border-left:1px var(--colorB) solid;
    border-bottom:2px var(--colorB) solid;
    transform:matrix(1, -1, 0, 1, 0, 0);
}
.audioControl-ctrlTimeBox span{
    background-color:var(--colorA);
    font-size:12px;
}
.audioControl-ctrlTimeBox .mm::after{
    content:":"
}
.audioControl-currentTime{
    color:var(--colorDT);
}
.audioControl-targetTime{
    color:var(--colorFT);
}
.audioControl-endTime{
    color:var(--colorCT);
}

.imgList-root,.imgList-list,.imgList-item,.imgList-itemLink,.imgList-itemImgBox{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
.imgList-root{
    border:var(--colorD1) 1px solid;
}
.imgList-list{
    transition:left 0.2s;
    margin:0;
    padding:0;
    overflow:visible;
}
.imgList-itemImg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: contain;
    background-color:var(--colorA);
}
.imgList-itemTitleBox{
    background-color:var(--colorA3);
    position:absolute;
    bottom:0;
    width:100%;
    padding-left:1em;
    color:var(--colorDT);
    opacity: 0;
    transition:opacity 0.05s;
}
/* .imgList-itemTitleBox:hover{
    background-color:var(--colorDT);
    color:var(--colorC);
} */
.imgList-root:hover .imgList-itemTitleBox{
    opacity: 1;
}

.imgList-last,.imgList-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    overflow:hidden;
    border:var(--colorD1) 2px solid;
    border-radius:50%;
    background-color:var(--colorET);
    opacity: 0;
    transition:opacity 0.05s;
}
.imgList-root:hover .imgList-next,.imgList-root:hover .imgList-last{
    opacity: 1;
}
.imgList-last::before,.imgList-next::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background-image:url("../img/iconSprites.svg");
    background-size:1000% 1000%;
    background-position:0 -200%;
    filter: hue-rotate(120deg) brightness(2);
}
.imgList-last:hover::before,.imgList-next:hover::before{
    filter: hue-rotate(0) brightness(1) drop-shadow(0px 0px 6px);
}
.imgList-last::before{
    transform:scaleX(-1);
    left:-12%;
}
.imgList-next::before{
    left:12%;
}
.imgList-last{
    left:8px;
}
.imgList-next{
    right:8px;
}
.imgList-ctrlListBox{
    opacity: 0.4;
    transition:opacity 0.05s;
    position:absolute;
    right:0;
    bottom:0;
}
.imgList-root:hover .imgList-ctrlListBox{
    opacity: 1;
}

.imgList-ctrlList{
    width:16px;
    height:auto
}
.imgList-ctrlItem,.imgList-ctrlListMark{
    position:relative;
    border-radius:50%;
    width:12px;
    height:12px;
    background-color:var(--colorD1);
    margin-bottom:4px;
}
.imgList-ctrlListMark{
    position:absolute;
    transition:top 0.2s;
}
.imgList-ctrlItem:hover,.imgList-ctrlListMark{
    background-color:var(--colorCT);
}

.contentListBox-root{
    width:100%;
    height:100%;
    overflow:hidden;
}
.contentListBox-titleBox{
    height:30px;
    border-bottom: var(--colorA) 1px solid;
}
.contentListBox-titleIconBox{
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
.contentListBox-titleIcon{
    width:100%;
    height:100%;
    background-color:var(--colorF);
}
.contentListBox-title{
    color: var(--colorET);
    width:100%;
    height:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contentListBox-title::before{
    content: "";
    width: 2em;
    height: 88%;
    display: inline-block;
    vertical-align: text-bottom;
    border-right:1px var(--colorA) solid;
}
.contentListBox-main{
    padding:6px;
    height: 100%;
    padding-bottom: 36px;
}
.contentListBox-textList,.contentListBox-imgTextList,.contentListBox-imgList{
    width:100%;
    height:100%;
    display:flex;
    flex-wrap: wrap;
}
.contentListBox-textItem{
    padding-left:24px;
}
.contentListBox-textItem::before{
    content:">";
    position:absolute;
    left:8px;
}
.contentListBox-textItemLink{
    color:var(--colorAT);
}
.contentListBox-textItemLink:hover{
    text-decoration: revert;
    color:var(--colorC);
}

.contentListBox-textItemTitle{
    color: var(--colorDT);
    height: 100%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contentListBox-textItemTitle:hover{
    color: var(--colorCT);
}
.contentListBox-textItemAddsText{
    position:absolute;
    right:0;
    top:0;
    height:100%;
    color:var(--colorD3);
}
.contentListBox-imgPicturesBox{
    padding-top:66%;
    background-color:var(--colorA);
    width:100%;
}
.contentListBox-imgPicturesBox img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:contain;
    border:var(--colorA) 1px solid;
}
.contentListBox-imgItem{
    padding:4px;
}
.contentListBox-imgItemBox{
    overflow: hidden;
    width:100%;
    height:100%;
    background-color:var(--colorD2);
}
.contentListBox-imgItemTitle{
    padding:3%;
    color:var(--colorDT);
}
.contentListBox-imgItemBox:hover{
    background-color:var(--colorC3);
}
.contentListBox-imgItemBox:hover .contentListBox-imgItemTitle{
    color:var(--colorFT);
}

.contentListBox-imgTextItem{
    padding: 2%;
    border-bottom:var(--colorA) 1px solid;
}
.contentListBox-imgTextItemBox{
    height:100%;
    width:100%;
    background-color:var(--colorD2);
    color: var(--colorDT);
}
.contentListBox-imgTextItemBox:hover{
    color:var(--colorFT);
    background-color: var(--colorC3);
}
.contentListBox-imgtextPicturesBox{
    position:absolute;
    height:100%;
    width:auto;
}
.contentListBox-imgtextPicturesBox img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:contain;
    border:var(--colorA) 1px solid;
    background-color:var(--colorA)
}
.contentListBox-imgTextItemTitle{
    height:100%;
    position:absolute;
    padding-left:6px;
    overflow:hidden;
}

.rotateImgExhibition-root
{        
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    background-color: var(--colorA);
    perspective: 900px;
    padding-bottom: 60px;
}
.rotateImgExhibition-list
{
    position: relative;
    width: 300px;
    height: 200px;
    cursor: pointer;
    transform-style: preserve-3d;
    animation: rotate 20s linear infinite;
}
.rotateImgExhibition-list:hover{
    animation-play-state: paused;
}
.rotateImgExhibition-item{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    /* px值为倒影离元素的距离*/
    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%,rgba(255,255,255,0.3)) ;
}
@keyframes rotate {
    0% {
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}
.rotateImgExhibition-img{
    width:100%; height:100%; object-fit: cover;
}
.readingList-root{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px 0 0 20px;
}
.readingList-list{
    clear: both;
    width: 100%;
}   
.readingList-item{
    list-style: none;
    width: 80%;
    max-width: 1200px;
    height: 202px;
    padding: 20px;
    margin:20px;
    background-color:var(--colorA);
}
.readingList-cover{
    float: left;
    width: 200px;
    height: 130px;
    margin-right: 20px;
    object-fit: contain;
    background-color:var(--colorA);
    border:var(--colorE) 1px solid;
}
.readingList-title{
    color: var(--colorB);
    width:100%;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
.readingList-abstract{
    color: var(--colorBT);
    margin-top:12px;
    text-indent: 2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}
.readingList-url{
    color: var(--colorBT);
}
.readingList-title:hover,.readingList-url:hover{
    color:var(--colorDT);
}
.readingList-explain{
    left:234px;
    width:calc(100% - 250px);
    position:absolute;
    bottom:12px;
    margin-top: 20px;
    color:var(--colorBT);
}
.readingList-explain-item{
    display:inline;
}
.readingList-explain-author{
    margin-left: 6px;
}
.readingList-explain-date{
    margin-left: 12px;
}
.readingList-explain-view{
    margin-left: 12px;
}
.readingList-explain-comment{
    margin-left: 12px;
}
.readingList-explain-tags{
    margin-left: 12px;
}
.readingList-explain .iconSpritesSvg{
    margin-right:0px;
}
.readingList-loadBtn{
    position:absolute;
    width:42px;
    height:16px
}

.tabPage-root{
    height:1.5em;
    width:100%;
}
.tabPage-item{
    float: left;
    margin: 10px;
}
.tabPage-lastBtn{
    margin-top:10px ;
    float: left;
}
.tabPage-nextBtn{
    margin-top: 10px;
    float: left;
}
.tabPage-jumpBox{
    color: var(--colorBT);
    display: flex;
    justify-content: center;
}
.tabPage-Pagebox{
    width: 100%;
    display: flex;
    justify-content: center;
}
.tabPage-goHead {
    margin-top: 6px;
}
.tabPage-goHead a{
    color: var(--colorBT);
}